import React, { createElement, useCallback } from 'react'
import {
  useRouteMatch,
  useHistory
} from 'react-router-dom'

export default function MyLink(props) {
  const { tag, route: { title, path } } = props

  const match = useRouteMatch({
    path
  })

  const { push } = useHistory()

  const handleClick = useCallback(
    () => {
      push(path)
    },
    []
  )

  return (
    <>
      {
        createElement(
          tag,
          {
            className: match ? 'active' : '',
            onClick: handleClick
          },
          title
        )
      }
    </>
  )
}
